<template>
  <div class="container">
    <div class="head-nav clearfix">
      <a href="#service-introduce" class="service-tab-select hidden-xs"
        >服务技能</a
      >
      <a href="#comment-section" class="service-tab-select">用户评价</a>
      <a href="#service-ensurance" class="service-tab-select">服务保障</a>
    </div>
    <div class="content">
      <div class="section-title">服务技能</div>
      <ul class="list">
        <li class="item" v-for="(item, i) in msgdata" :key="i">
          <div class="pic" style="width: 100%">
            <img :src="item.imgurl" alt="" width="100%" />
          </div>
          <div class="content">
            <div class="title">
              {{ item.title }}
            </div>
            <ul class="plist">
              <li
                class="pitem"
                v-for="(pitem, j) in item.children"
                :key="j"
              >
              {{pitem}}
              </li>
            </ul>
          </div>
        </li>
      </ul>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      showlist: [],
      msgdata: [
        {
          imgurl: "http://res0.chenxin99.com/images/baomu/yue_1.jpg",
          title: "产妇护理",
          children: [
            "恶露的观察及护理",
            "口腔卫生、头发清洁、洗浴护理",
            "衣物床品的更换与清洁",
            "产妇体温体重测量",
            "乳房日常护理、通乳催乳服务",
            "营养膳食搭配月子餐",
            "室内环境调控",
            "室内环境卫生处理",
          ],
        },
        {
          imgurl: "http://res0.chenxin99.com/images/baomu/yue_2.jpg",
          title: "产后恢复",
          children: [
            "子宫恢复观察",
            "产妇身体恢复观察",
            "剖腹产护理",
            " 肩颈及四肢按摩",
            "形体恢复",
            "私密部位护理",
            "产后体操指导",
            "抑郁病症预防",
          ],
        },
        {
          imgurl: "http://res0.chenxin99.com/images/baomu/yu_1.jpg",
          title: "宝宝护理",
          children: ["宝宝常见疾病预防", "婴儿大小便的清洁与记录", "口腔、肚脐、臀部的清洁", "拍嗝溢奶处理，喂奶方式及技巧传授", "每日眼、耳、鼻的清洗", "喂奶、喂水、换尿布", "日光浴、空气浴、洗浴", "黄疸观察护理脐带消毒护理"],
        },
        {
          imgurl: "http://res0.chenxin99.com/images/baomu/yu_2.jpg",
          title: "宝宝早教",
          children: ["婴儿哄睡", "婴儿按摩、抚触", "婴儿游泳、锻炼身体指导", "婴儿情绪安抚", "情感与社会行为培养", "亲子互动游戏设计", "婴儿洗澡指导", "感知与语言动作训练"],
        },
      ],
    };
  },
};
</script>

<style scoped>
* {
  margin: 0;
  padding: 0;
  text-decoration: none;
  list-style: none;
}
.list {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  margin: 30px 15px 0;
}
.pitem {
  padding-left: 25px;
  margin: 20px 0;
  background: url(http://res.chenxin99.com/images/baomu/icon_duigou.png)
    no-repeat;
  font-size: 16px;
  color: #333;
  line-height: 1em;
}
.list .item {
  width: 48%;
  /* box-sizing: border-box;
  padding: 20px 22px; */
  margin-bottom: 25px;
  border: 1px solid #f5f5f5;
}
.list .item .content {
  padding: 20px 30px;
  box-sizing: border-box;
}
.list .item .title {
  font-size: 18px;
  color: #333;
  line-height: 2em;
}
.container {
  width: 890px;
  padding: 30px 15px;
  margin-bottom: 20px;
}
.clearfix::after {
  display: block;
  content: "";
  clear: both;
}
.head-nav {
  background-color: #fff;
  padding: 0 30px;
  margin-bottom: 10px;
}
.service-tab-select {
  float: left;
  font-size: 16px;
  line-height: 58px;
  margin-right: 50px;
  color: #666;
}
.content {
  padding: 30px 15px;
  background-color: #fff;
  margin-bottom: 20px;
}
.section-title {
  padding: 0 15px;
  font-size: 18px;
  color: #333;
}
</style>